<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>砭石</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_842683_mrv087fj6um.css">
</head>

<body>
    <header>
        <div class="top">
            <div class="title">
                <div class="logo"><img src="../images/logoWhite.png" alt=""></div>
                <p>后台管理系统</p>
            </div>
            <div class="login">
                <div class="userName">
                    <i class="icon iconfont icon-iconfontzhizuobiaozhun023104"></i>
                    <span>SZZ</span>
                </div>
                <div class="signOut">安全退出</div>
            </div>
        </div>
    </header>
    <main>
        <nav class="leftNav">
            <ul>
                <li class="active">
                    <a href="#">
                        <i class="iconfont icon-shouye2"></i>
                        <span>首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </a>
                </li>
                <li>
                    <a href="./vip.html">
                        <i class="iconfont icon-iconfontzhizuobiaozhun023104"></i>
                        <span>会员管理</span>
                    </a>
                </li>
                <li>
                    <a href="./appoint.html">
                        <i class="icon-yuyue1 iconfont"></i>
                        <span>预约管理</span>
                    </a>
                </li>
                <li>
                    <a href="./serve.html">
                        <i class="icon-fuwuchuangb iconfont"></i>
                        <span>服务管理</span>
                    </a>
                </li>
                <li>
                    <a href="./news.html">
                        <i class="icon-xinwen iconfont"></i>
                        <span>新闻管理</span>
                    </a>
                </li>
                <li>
                    <a href="./store.html">
                        <i class="icon-dianpufill iconfont"></i>
                        <span>店铺管理</span>
                    </a>
                </li>
                <li>
                    <a href="./area.html">
                        <i class="icon-quyuditu iconfont"></i>
                        <span>区域设定</span>
                    </a>
                </li>
                <li>
                    <a href="./vipGrade.html">
                        <i class="icon-vip iconfont"></i>
                        <span>会员等级</span>
                    </a>
                </li>
                <li>
                    <a href="./order.html">
                        <i class="icon-dingdan iconfont"></i>
                        <span>订单管理</span>
                    </a>
                </li>
                <li>
                    <a href="./operatingCenter.html">
                        <i class="icon-shezhi iconfont"></i>
                        <span>运营中心</span>
                    </a>
                </li>
                <li>
                    <a href="./record.html">
                        <i class="icon-jiankang iconfont"></i>
                        <span>健康档案</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="rightContent">
            <div class="screen">
                <select name="timeSlt" id="timeSlt" class="slt">
                    <option value="0" disabled selected hidden>按时间筛选</option>
                    <option value="0">全部</option>
                    <option value="180">近半年</option>
                    <option value="90">近三个月</option>
                    <option value="30">近一个月</option>
                    <option value="7">近一周</option>
                </select>
                <select name="siteSlt" id="siteSlt" class="slt">
                    <option value="0" disabled selected hidden>按区域筛选</option>
                    <option value="0">全部</option>
                </select>
            </div>
            <div class="getData backWit">
                <div class="single active totalVip">
                    <p>42,123</p>
                    <h3>总会员数</h3>
                </div>
                <div class="single">
                    <p>2,123</p>
                    <h3>总订单</h3>
                </div>
                <div class="single">
                    <p>2,123</p>
                    <h3>合计营收</h3>
                </div>
                <div class="single">
                    <p>2,123</p>
                    <h3>总预约</h3>
                </div>
                <div class="single">
                    <p>2,123</p>
                    <h3>总门店</h3>
                </div>
            </div>
            <div class="echarts">
                <div class="chart backWit">
                    <h2>会员性别占比</h2>
                    <div id="genderChart" class="genderChart" style="height:11rem;width: 100%;">

                    </div>
                </div>
                <div class="chart backWit">
                    <h2>会员年龄分布</h2>
                    <div class="ageChart" id="ageChart" style="height:11rem;width: 100%;">

                    </div>
                </div>
                <div class="chart backWit">
                    <h2>套餐订购占比</h2>
                    <div class="setMealChart" id="setMealChart" style="height:11rem;width: 100%;">

                    </div>
                </div>
                <div class="chart backWit">
                    <h2>使用时间分布</h2>
                    <div class="timeChart" id="timeChart" style="height:11rem;width: 100%;">

                    </div>
                </div>
            </div>
        </div>

    </main>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script type="text/javascript">

    </script>
    <script>
        $(function () {
            //会员统计
            $.ajaxSetup({
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                }
            });

            // $.ajax({
            //     type: "GET",
            //     url: 'http://bianshi.hebinqunyan.com/admin/count/usercount',
            //     success: function (data) {
            //         console.log(data);
            //     }

            // })
            $.ajax({
                type: "GET",
                url: 'http://bianshi.hebinqunyan.com/admin/area',
                success: function (data) {
                    console.log(data.data);

                    let setData = data.data;
                    var str;
                    for (let i = 0; i < setData.length; i++) {
                        str += `<option value="${setData[i].id}">${setData[i].name}</option>`
                    }
                    $('#siteSlt').html($('#siteSlt').html() + str);
                }

            })

            $(".slt").change(function () {
                var mydate = new Date();
                var sdate = '2017-01-01';
                var edate = mydate.toLocaleDateString();
                if ($("#siteSlt").val() == null) {
                    var siteSlt = 0;
                } else {
                    var siteSlt = $("#siteSlt").val();
                }
                if ($('#timeSlt').val() == 0 || $('#timeSlt').val() == null) {
                    sdate = '2017-01-01';
                    edate = formatdate(mydate.toLocaleDateString());
                } else {
                    sdate = new Date(Date.parse(mydate) - (1000 * 24 * 60 * 60 * $('#timeSlt').val()));
                    sdate = formatdate(sdate.toLocaleDateString());
                    edate = formatdate(mydate.toLocaleDateString());
                }
                $.ajaxSetup({
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: true
                    }
                });
                $.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: 'http://bianshi.hebinqunyan.com/admin/count/usercount',
                    data: {
                        str_date: sdate,
                        end_date: edate,
                        area_id: siteSlt
                    },
                    success: function (data) {
                        console.log(data);
                        //循环读取数据
                        mnum = 0;
                        wnum = 0;
                        var arr = [];
                        $.each(data.data.res_sex, function (index, obj) {
                            if (obj['sex'] == "男") {
                                mnum = obj['sum_sex'];
                                var obj = {
                                    value: obj['sum_sex'],
                                    name: '男'
                                }
                                arr.push(obj);
                            } else {
                                wnum = obj['sum_sex'];
                                var obj = {
                                    value: obj['sum_sex'],
                                    name: '女'
                                }
                                arr.push(obj);
                            }
                        });
                        gender(arr)
                        $(".totalVip p").html((mnum + wnum));
                        var val = [],
                            name = [];
                        $.each(data.data.res_age, function (index, obj) {
                            if (obj['user_age_group']) {
                                val.push(obj['sum_agegroup']);
                                name.push(obj['user_age_group']);
                            }


                        });
                        age(val, name);
                    }

                })
            })
            $("#timeSlt").change()

            function gender(data) {
                var dom = document.getElementById("genderChart");
                var genderChart = echarts.init(dom);
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        top: '5%',
                        data: ['男', '女'],
                        selectedMode: false,
                    },
                    series: [{
                        name: '会员性别占比',
                        type: 'pie',
                        radius: '60%',
                        center: ['30%', '50%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                label: {
                                    show: false //隐藏标示文字
                                },
                                labelLine: {
                                    show: false //隐藏标示线
                                }
                            }
                        }
                    }]
                };
                genderChart.setOption(option);
            }

            function age(val, name) {
                var dom = document.getElementById("ageChart");
                var timeChart = echarts.init(dom);
                var option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '10%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: name
                    },
                    yAxis: {
                        type: 'value',
                        // show: false,
                        axisTick: {
                            show: false
                        },
                    },
                    series: [{
                        name: '人数',
                        data: val,
                        type: 'bar'
                    }]
                }
                timeChart.setOption(option);
            }
            var dom = document.getElementById("setMealChart");
            var setMealChart = echarts.init(dom);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    right: '5%',
                    top: '5%',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    // selectedMode: false,
                },
                series: [{
                    name: '套餐订购占比',
                    type: 'pie',
                    radius: '60%',
                    center: ['30%', '50%'],
                    data: [{
                            value: 335,
                            name: '直接访问'
                        },
                        {
                            value: 310,
                            name: '邮件营销'
                        },
                        {
                            value: 234,
                            name: '联盟广告'
                        },
                        {
                            value: 135,
                            name: '视频广告'
                        },
                        {
                            value: 1548,
                            name: '搜索引擎'
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: false //隐藏标示文字
                            },
                            labelLine: {
                                show: false //隐藏标示线
                            }
                        }
                    }
                }]
            };
            setMealChart.setOption(option);

            var dom = document.getElementById("timeChart");
            var timeChart = echarts.init(dom);
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },

                grid: {
                    top: '10%',
                    left: '6%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'value',
                    show: false,
                }],
                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }],
                series: [{
                    name: '人数',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data: [200, 170, 240, 244, 200, 220, 210]
                }]
            }
            timeChart.setOption(option);
        })
    </script>
</body>

</html>